<template>
    <div class="login-wrap">
        <div class="ms-title">后台管理系统</div>
        <div class="ms-login">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
                <el-form-item prop="userCode">
                    <el-input v-model="ruleForm.userCode" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="密码" v-model="ruleForm.password"
                              @keyup.enter.native="submitForm('ruleForm')"></el-input>
                </el-form-item>
                <el-form-item prop="kaptcha">
                    <el-input class="yan" placeholder="验证码" v-model="ruleForm.kaptcha"
                              @keyup.enter.native="submitForm('ruleForm')"></el-input>
                    <img class="yanimg" :src="imgSrc" @click="getKaptcha()">
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm('ruleForm')" style="width: 160px">登录</el-button>
                </div>
                <p style="font-size:12px;line-height:30px;color:#999;">Tips : 请输入用户名和密码。</p>
            </el-form>
        </div>
    </div>
</template>

<script>
  export default {
    data: function () {
      return {
        imgSrc: '',
        ruleForm: {
          userCode: '',
          password: '',
          kaptcha: '',
          tempToken: ''
        },
        rules: {
          userCode: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ],
          kaptcha: [
            {required: true, message: '请输入验证码', trigger: 'blur'}
          ]
        }
      }
    },
    created () {
      this.getKaptcha()
    },
    methods: {
      submitForm (formName) {
        const self = this
        self.$refs[formName].validate((valid) => {
          if (valid) {
            self.$axios
              .post('loginRest/login', self.ruleForm)
              .then(function (res) {
                if (res.data.result) {
                  let obj = res.data.obj
                  sessionStorage.setItem('token', obj.token)
                  localStorage.setItem('userId', obj.userId)
                  localStorage.setItem('userCode', obj.userCode)
                  localStorage.setItem('userName', obj.userName)
                  localStorage.setItem('isEmp', obj.user.isEmp)
                  localStorage.setItem('isOpen', obj.user.isOpen)
                  self.$router.push('/main')
                } else {
                  self.getKaptcha()
                  self.$message.error(res.data.detail)
                }
              })
              .catch(function (error) {
                console.log(error)
                self.getKaptcha()
                self.$message.error('用户名或者密码错误!')
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      // 获取验证码
      getKaptcha () {
        let self = this
        self.$axios.post('captchaRest/getTempToken')
          .then(res => {
            if (res.data.result) {
              self.ruleForm.kaptcha = ''
              self.ruleForm.tempToken = res.data.msg
              console.log("self.$global",self.$global)
              self.imgSrc = self.$global.API + 'captchaRest/getValidateImg?tempToken=' + self.ruleForm.tempToken
            }
          })
      },
    }
  }
</script>

<style scoped>
    .login-wrap {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .ms-title {
        position: absolute;
        top: 50%;
        width: 100%;
        margin-top: -230px;
        text-align: center;
        font-size: 30px;
        color: #fff;
    }

    .ms-login {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 300px;
        height: 200px;
        margin: -150px 0 0 -190px;
        padding: 40px;
        border-radius: 5px;
        background: #fff;
    }

    .login-btn {
        text-align: center;
    }

    .login-btn button {
        width: 100%;
        height: 36px;
    }

    .yan {
        width: 64%;

    }

    .yanimg {
        width: 100px;
        float: right;
    }
</style>
